<template>
  <div class="QuestionBank">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item prop="subject" label="学科">
              <el-select v-model="form.subject" clearable placeholder="请选择">
                <el-option
                  v-for="item in subject"

                  :key="item.id"
                  :label="item.short_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="step" label="阶段">
              <el-select v-model="form.step" clearable placeholder="请选择">
                <el-option label="初级" value="1" />
                <el-option label="中级" value="2" />
                <el-option label="高级" value="3" />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="5">
            <el-form-item prop="enterprise" label="企业">
              <el-select v-model="form.enterprise" clearable placeholder="请选择">
                <el-option
                  v-for="item in enterprise"
                  :key="item.id"
                  :label="item.short_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="type" label="题型">
              <el-select v-model="form.type" clearable placeholder="请选择">
                <el-option label="单选" value="1" />
                <el-option label="多选" value="2" />
                <el-option label="简答" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" />
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item prop="difficulty" clearable label="难度">
              <el-select v-model="form.difficulty" clearable placeholder="请选择">
                <el-option label="初级" value="1" />
                <el-option label="中级" value="2" />
                <el-option label="高级" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="username" label="作者">
              <el-input v-model="form.username" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="status" label="状态">
              <el-select v-model="form.status" clearable placeholder="请选择">
                <el-option label="禁用" value="0" />
                <el-option label="启用" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="create_date" label="日期">
              <el-date-picker
                v-model="form.create_date"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:SS"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" />
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item prop="title" label="标题">
              <el-input v-model="form.title" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-button type="primary" @click="getdata">搜索</el-button>
            <el-button type="danger" @click="$refs.form.resetFields()">清除</el-button>
            <el-button type="primary" @click="addEvent">+新增试题</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card">
      <el-table :data="list" style="width: 100%">
        <el-table-column
          label="序号"
          width="50"
          align="center"
        >
          <template #default="{$index}">
            <div>
              {{ (form.page-1)*(form.limit)+$index+1 }}

            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="题目"
          align="center"
        >
          <template #default="{ row }">
            <div v-html="row.title" />
          </template></el-table-column>
        <el-table-column
          label="学科阶段"
          width="100"
          prop="subject_name"
          :formatter="formatterubject_name"
        />
        <el-table-column
          label="题型"
          width="100"
          align="center"
          :formatter="formatterType"
        />
        <el-table-column
          label="企业"
          width="150"
          align="center"
          prop="enterprise_name"
        />
        <el-table-column
          label="创建者"
          align="center"
          width="150"
          prop="username"
        />
        <el-table-column
          label="状态"
          align="center"
          width="70"
          :formatter="formatterStatus"
        >
          <template #default="{row}">
            <div :class="{statusred:row.status===0}">
              {{ formatterStatus(row) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="访问量"
          align="center"
          prop="reads"
          width="70"
        />
        <el-table-column
          align="center"
          label="操作"
        >
          <template #default="{row}">
            <el-button
              type="success"
              size="mini"
              @click="editEvent(row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="status(row)"
            >
              {{ row.status === 0 ? '启用' : '禁用' }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delEvent(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center;">

        <el-pagination
          :current-page.sync="form.page"
          :page-sizes="[1,3,5,10]"
          :page-size.sync="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizechange"
          @current-change="getdata"
        />
      </div>
    </el-card>
    <add ref="add" v-model="showAdd" @getdata="getdata" />
  </div>
</template>

<script>

import { questionList, questionStatus, enterpriseList, subjectList, questionOne, questionRemove } from '@/api/questionlist.js'
import add from './add/add.vue'
import jsCookie from 'js-cookie'

export default {
  components: {
    add
  },
  data() {
    return {
      total: 0,
      enterprise: [],
      subject: [],
      showAdd: false,
      form: {
        title: '', // 否 string 标题名称
        subject: '', // 否 int 学科id
        enterprise: '', // 否 int 企业id
        type: '', // 否 int 题目类型:1(单选),2(多选),3(简答)
        step: '', // 否 string 题目阶段:1(初级),2(中级),3(高级)
        username: '', // 否 string 作者
        status: '', // 否 int 状态:0(禁用),1(启用)
        difficulty: '', // 否 int 题目难度: 1(简单),2(一般),3(困难)
        create_date: '', // 否 string 创建日期
        page: 1, // 否 string 页码 默认为1
        limit: +jsCookie.get('page') || 10 // 否 string 页尺寸 默认为10
      },
      list: [{}]

    }
  },
  created() {
    this.getdata()
    this.getsubject()
    this.getenterpriseList()
  },
  methods: {
    async getenterpriseList() {
      const res = await enterpriseList()
      this.enterprise = res.data.items
      this.$refs.add.enterprise = res.data.items
      console.log('getenterpriseList', res)
    },
    async getsubject() {
      const res = await subjectList()
      this.subject = res.data.items
      this.$refs.add.subject = res.data.items
      console.log(res)
      console.log(this.subject)
    },
    async status(row) {
      await questionStatus(row.id)

      await this.getdata()
    },
    formatterubject_name(row) {
      const res = {
        '1': '初级',
        '2': '中级',
        '3': '高级'
      }[row.difficulty]
      return row.subject_name + '  ' + res
    },
    formatterType(row, column) {
      return {
        '1': '单选',
        '2': '多选',
        '3': '简答'
      }[row.type]
    },
    formatterStatus(row, column) {
      if (row.status === 0) {
        return '禁用'
      } else {
        return '启用'
      }
    },
    async getdata() {
      const res = await questionList(this.form)
      this.list = res.data.items
      this.total = res.data.pagination.total
    },
    addEvent() {
      this.$refs.add.mode = '新增题库测试'
      this.showAdd = true
    },
    handleSizeChange() {
      console.log(process.env.VUE_APP_BASE_API)
      console.log(1)
    },
    handleCurrentChange() {
      console.log(1)
    },
    async editEvent(row) {
      const res = await questionOne(row.id)
      console.log(res)
      this.$refs.add.mode = '编辑题库测试'

      res.data.type = res.data.type.toString()
      res.data.difficulty = res.data.difficulty.toString()
      this.$refs.add.form = { ...JSON.parse(JSON.stringify(this.$refs.add.form)), ...JSON.parse(JSON.stringify(res.data)), select_options: res.data.options, city: res.data.city.split(','), step: res.data.step.toString(), multiple_select_answer: res.data.multiple_select_answer.split(',') }
      this.$nextTick(() => {
        this.showAdd = true
      })
    },
    async delEvent(row) {
      await this.$confirm('您确定要删除吗', '温馨提示')
      if (this.form.page >= 1 && this.list.length === 1) {
        this.form.page--
      }
      await questionRemove(row.id)
      await this.getdata()
    },
    sizechange() {
      jsCookie.set('page', this.form.limit)
      this.getdata()
    }
  }
}
</script>

<style lang="scss" scoped>
.card{
  margin-top: 10px;
}
  .statusred{
    color: red;
  }
</style>
